<template>
	<view class="content">
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<view class="top">
			<view class="head_info">
				<image :src="headImg" class="head_img"></image>
				<view class="account">{{phoneNumber}}</view>
			</view>
			<view class="message_reply">
				<view class="message">
					<view class="message_count">2</view>
					<view class="message_title">消息</view>
				</view>
				<view class="vertical_line">
					<image src="../../static/personal_center/vertical_line.png"></image>
				</view>
				<view class="reply">
					<view class="reply_count">3</view>
					<view class="reply_title">回复</view>
				</view>
			</view>
		</view>
		<view class="function_list">
			<navigator url="./account_management" class="function_item">
				<image src="../../static/personal_center/account_management.png" class="function_img"></image>
				<view class="function_title">账户管理</view>
				<image src="../../static/personal_center/more.png" class="more"></image>
			</navigator>
			<view class="function_item">
				<image src="../../static/personal_center/real_name_authentication.png" class="function_img"></image>
				<view class="function_title">实名认证</view>
				<image src="../../static/personal_center/more.png" class="more"></image>
			</view>
			<navigator url="./feedback" class="function_item">
				<image src="../../static/personal_center/feedback.png" class="function_img"></image>
				<view class="function_title">意见反馈</view>
				<image src="../../static/personal_center/more.png" class="more"></image>
			</navigator>
				<view  class="function_item">
				<image src="../../static/patient_list/scan.png" class="function_img" style="width: 40upx ;height: 40upx;" @tap=scan()></image>
				<view class="function_title" style="padding-left: 15upx;">扫码绑定</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				headImg: '',
				phoneNumber: '',
				username: ''
			}
		},
		created() {
			this.getUserInfo();
		},
		methods: {
				scan() {
				uni.scanCode({
					success: res => {
				    console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					var json = new Object();
					json.placeSid = res.result;
					this.$http.uniHttpPost(this.$api.server_binding, json).then(res => {
								if(res.data.code == 0){
								  uni.showToast({
									icon: 'success',
									title: '绑定成功！',
									duration: 3000
								})
							}else if (res.data.code == 500){
								  uni.showToast({
									icon: 'none',
									title: res.data.data,
									duration: 3000
								})
							}
						}).catch(err => {
							console.log("err: " + JSON.stringify(err));
						})
					}
				});
			},
			getUserInfo() {
				this.$http.uniHttpPost(this.$api.server_userInfo, null).then(res => {
					console.log("res: " + JSON.stringify(res));
					this.headImg = res.data.data.img;
					this.phoneNumber = res.data.data.phoneNumber;
					this.username = res.data.data.username;
					console.log("info"+this.phoneNumber);
				}).catch(err => {
					console.log("err: " + JSON.stringify(err));
				})
			}
		}
	}
</script>

<style scoped>
	.scan {
		
		height: 58.47upx;
		width: 58.47upx;
	}
	
	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.top {
		height: 590.27upx;
		background-color: #29d1cb;
		display: flex;
		align-items: center;
	}

	.head_info {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.head_info image {
		width: 141.66upx;
		height: 141.66upx;
		border-radius: 50%;
		background-color: #ffffff;
	}

	.account {
		font-size: 25upx;
		font-family: 'FZLTHJW';
		color: rgb(255, 255, 255);
	}

	.message_reply {
		height: 98.61upx;
		background-color: rgba(0, 0, 0, 0.102);
		width: 100%;
		position: fixed;
		top: 491.66upx;
		display: flex;
		flex-direction: row;
		font-size: 25upx;
		font-family: 'FZLTHJW';
		color: rgb(255, 255, 255);
	}

	.vertical_line image {
		width: 1px;
		height: 100%;
	}

	.message,
	.reply {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.function_list {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.function_item {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 104.16upx;
		border-bottom: 0.69upx solid rgba(0, 0, 0, 0.32);
	}

	.function_img {
		width: 52.77upx;
		height: 52.77upx;
		margin-left: 51.38upx;
		margin-right: 20.83upx;
	}

	.function_title {
		flex: 1;
		font-size: 25upx;
		font-family: 'FZLTHJW';
		color: rgb(0, 0, 0);
	}

	.more {
		margin-right: 52.08upx;
		width: 32upx;
		height: 32upx;
	}
</style>
